<template>
    <div>
        <el-page-header @back="goBack" content="快捷改价"></el-page-header>
        <div class="common_line" style="margin: 10px 0;"></div>
        <el-form :model="queryParams" label-width="auto">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="关键词:">
                        <el-input style="width: 200px;" maxlength="100" v-model="queryParams.search" placeholder="商品编号/商品名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="商品分类:">
                        <el-cascader
                            v-model="selectCates"
                            :options="categorys"
                            :show-all-levels="false"
                            :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                            @change='itemChanged'
                            style="width: 200px;"
                            clearable>
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" icon="el-icon-search" @click="handleQuery"
                        style="margin: 8px 0 0 20px;" class="btn_primary_color">查询</el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-table border :data="productList" style="margin-top: 15px;">
            <el-table-column label="商品图片" align="center" width="80" prop="imageUrl">
                <template slot-scope="scope">
                    <el-popover
                        placement="right"
                        width="240"
                        trigger="hover">
                        <img :src="scope.row.imageUrl" style="width: 240px;height: 240px;" alt="">
                        <img slot="reference" :src="scope.row.imageUrl" style="width: 32px;height: 32px;" alt="">
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" header-align="center" min-width="200" align="left" prop="prod_name" />
            <el-table-column label="商品编号" width="100" align="center" prop="goods_no" />
            <el-table-column label="商品分类" min-width="160" align="center" prop="cateName" />
            <el-table-column label="单位" width="60" align="center" prop="unit_name" />
            <el-table-column align="center"
                v-for="(col, index) in unitLevelHeaders" 
                :key="'header_'+index"
                :prop="col.prop" 
                :label="col.label"
                width="150">
                <template slot-scope="scope">
                    <el-input style="width: 80%;margin: 0 auto;" v-model="scope.row[col.prop]"
                        @blur="priceBlur($event, scope.row, col.prop)" placeholder="请输入"></el-input>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-show="total>0"
            background
            style="padding: 32px 16px;background: #fff;text-align: right;"
            @size-change="getUpdatePricesList"
            @current-change="getUpdatePricesList"
            :current-page.sync="pageParam.page"
            :page-size="pageParam.num"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getUpdatePriceLists, updateSinglePrice, getTreeList, getPriceLevel } from '@/api/product';
export default {
    name: 'updatePrice',
    data() {
        return {
            queryParams: {
                search: '',
                category_one_level: '',  //一级分类
                category: '',    //二级分类
            },
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            productList: [],
            selectCates: [],
            categorys: [],
            unitLevelHeaders: []
        }
    },
    props: {
        corpId: {
            type: Number
        }
    },
    mounted() {
        this.getProductCategory()
        this.getUnitLevels()
    },
    methods: {
        goBack() {
            this.$emit('hidden', {isRefresh: true})
        },
        handleQuery() {
            this.pageParam.page = 1
            this.getUpdatePricesList()
        },
        // 获取单位等级
        getUnitLevels() {
            getPriceLevel({corp: this.corpId, is_start: 1}).then(res => {
                this.unitLevelHeaders = res.data.data.level_list.filter(item => {
                    item.label = item.price_name
                    item.prop = item.price_column_name
                    return item
                })
                this.handleQuery()
            })
        },
        // 获取商品列表
        getUpdatePricesList() {
            this.pageParam.corp = this.corpId
            let params = Object.assign({}, this.queryParams, this.pageParam)
            getUpdatePriceLists(params).then(res => {
                let list = res.data.data.good_list.filter(item => {
                    let info = item.goods_details
                    item.cateName = info.category_show.name
                    if (info.image_show && info.image_show.url){
                        item.imageUrl = info.image_show.url
                    }else{
                        item.imageUrl = 'https://anhuiyaoying.com/icon/default.png'
                    }
                    item.prod_name = info.name
                    item.goods_no = info.goods_no || ''
                    item.statusName = info.status=='active'?'在售':'停售'
                    return item
                })
                this.productList = list
                this.total = res.data.data.total
            })
        },
        // 获取商品分类
        getProductCategory() {
            let that = this
            getTreeList({corp: this.corpId}).then(res => {
                let categorys = res.data.data.category_list.filter(item => { return !item.parent })
                that.categorys = categorys
            })
        },
        itemChanged(val) {
            if (val && val.length>0){
                if (val.length === 1){
                    this.queryParams.category_one_level = val[0]
                    this.queryParams.category = null
                }else {
                    this.queryParams.category_one_level = val[0]
                    this.formData.category = val[1]
                }
            }else{
                this.queryParams.category_one_level = null
                this.queryParams.category = null
            }
        },
        priceBlur(val, row, type) {
            let value = val.target.value
            value = value.replace(/[^0-9.]/g, ''); // 只允许数字和小数点
            const parts = value.split('.');
            if (parts.length > 2) {
                value = parts[0] + '.' + parts.slice(1).join(''); // 只取第一个小数点之前的部分
            }
            console.log(value, row, type)
            row[type] = value
            
            if (value) {
                updateSinglePrice({
                    corp_id: this.corpId,
                    goods_id: row.goods,
                    pk_id: row.id,
                    price_name: type,
                    price_value: value
                }).then(res => {
                    if (res.code == 200){
                        this.$message.success('修改成功')
                        this.getUpdatePricesList()
                    }
                })
            }
        },
    }
}
</script>
<style lang="less" scoped>
	@import '../../style/mixin';
</style>